<template>
  <div>
    首页
    <br>
    <h2 v-if="bol">{{ obj }}</h2>
    <button @click="objSet">给obj加入新增属性</button>
    <hr>
    <h2>{{ arr }}</h2>
    <button @click="arrSet">修改arr的第一项</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        a: 10
      },
      arr: [1, 2, 3, 4, 5],
      bol: true
    }
  },
  methods: {
    objSet() {
      // this.obj.b = Date.now()
      this.$set(this.obj, 'b', Date.now())
      /*
      $set:当数据修改了，页面没有能实现响应式更新时使用（针对对象的新增属性，也可以用于数组）
      this.$set(对象,key,value)
      */
      // this.bol = false
      // this.$nextTick(() => {
      //   this.bol = true
      // })
      console.log(this.obj)
    },
    arrSet() {
      this.arr[0] = Date.now()
      // this.arr.push(Date.now())
      console.log(this.arr)
      this.$set(this.arr, 0, Date.now())
    }
  }
}
</script>
<style></style>
